/* control-toolbar 工具栏部件 start */
$control-toolbar: (
  item-margin: 0 getCssVar(spacing, extra-tight),
  item-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
  icon-max-width: getCssVar(width-icon, medium),
  icon-max-height: getCssVar(width-icon, medium),
  separator-color: getCssVar(color, fill, 2),
  menu-height: 32px,
  text-margin: 0 0 0 getCssVar(spacing, extra-tight),
);

/* control-toolbar 视图工具栏 end */

// 工具栏项样式
@mixin toolbar-item-style {
  font-size: getCssVar(font-size, regular);

  .#{bem(toolbar-item-icon)}{
    @include flex(row, center, center); 

    width: getCssVar(control-toolbar, icon-max-width);
    height: getCssVar(control-toolbar, icon-max-height);

    .#{bem(icon)}{
      @include flex(row, center, center);  
    }

    i{
      font-size: getCssVar(font-size, regular);      
    }

    img{
      display: inline-block;
      width: 100%;
      height: 100%;
    }

    & + .#{bem(toolbar-item-text)}{
      margin: getCssVar(control-toolbar, text-margin);
    }
  }
}

@include b(control-toolbar) {
  @include set-component-css-var(control-toolbar, $control-toolbar);

  display: flex;
  align-items: center;

  @include e(item) {
    display: flex;
    align-items: center;
    margin: getCssVar(control-toolbar, item-margin);
    overflow: hidden;

    .el-button {
      @include flex(row, center, center);

      padding: getCssVar(control-toolbar, item-padding);

      > span {
        @include flex(row, center, center);        

        pointer-events: none; // 禁用点击事件，保证event.target是button元素        
        @include toolbar-item-style;
      }
    }

    @include when(loading){
      .el-button{
        .#{bem(icon)}{
          display: none;
        }
      }
    }
  }

  @include e(item-separator) {
    @include no-repeat;

    color: getCssVar(control-toolbar, separator-color);
  }


  @include e(menu){
    &.el-menu{
      height: getCssVar(control-toolbar, menu-height);
      margin: getCssVar(control-toolbar, item-margin);
      border: none;
    } 

    .#{bem(control-toolbar-submenu)}{
      .el-sub-menu__title{
        @include flex(row, center, center);

        padding: 0;    
        font-size: getCssVar(font-size, regular);
        color: getCssVar(color, primary, text);                  
        background-color: getCssVar(color, primary);
        border-bottom: none;
        border-radius: getCssVar(border-radius, small);
        
        .el-sub-menu__icon-arrow{
          display: none;
        }

        >span{
          @include toolbar-item-style;       
          @include flex(row, center, center);

          line-height: 1;
        }

        &:hover{
          color: getCssVar(color, primary, hover, text);
          background-color: getCssVar(color, primary, hover);       
        }
      }

      &.is-active{
        .el-sub-menu__title{
          color: getCssVar(color, primary, text);    
        }
      }
    }
  }
}

@include b(control-toolbar-submenu-popper){
  @include set-component-css-var(control-toolbar, $control-toolbar);                  

  color: getCssVar(color, primary, text);
  background-color: getCssVar(color, primary);    
  
  .el-menu{

    .#{bem(control-toolbar-submenu)}{
      .el-sub-menu__title{
        padding: 0 10px;    
        font-size: getCssVar(font-size, regular);
        color: getCssVar(color, primary, text);                  
        background-color: getCssVar(color, primary);
        
        &:hover{
          color: getCssVar(color, primary, hover, text);
          background-color: getCssVar(color, primary, hover);       
        }
      }

      &.is-active{
        .el-sub-menu__title{
          color: getCssVar(color, primary, text);    
        }
      }
    }    
    
    .#{bem(control-toolbar-submenu-rawitem)}{
      color: getCssVar(color, primary, text);               
    }
    
    .el-menu-item{
      @include toolbar-item-style;   

      color: getCssVar(color, primary, text);
       
  
      &.is-active{
        color: getCssVar(color, primary, text);    
      }

      &:hover{
        color: getCssVar(color, primary, hover, text);
        background-color: getCssVar(color, primary, hover);          
      }

      .el-button {
        justify-content: flex-start;
        width: 100%;
        padding: 0;

        --el-button-active-bg-color: transparent;
        --el-button-hover-bg-color: transparent;
        --el-button-bg-color: transparent;
        --el-mask-color-extra-light: transparent;
      }
    }
  }

}